<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select
        v-model="schoolId"
        placeholder="请选择所属院校"
        @change="selectChange()"
      >
        <el-option
          v-for="it in schoolList"
          :key="it.id"
          :label="it.name"
          :value="it.id"
        ></el-option>
      </el-select>
      <el-button
        class="filter-item"
        type="primary"
        size="small"
        icon="el-icon-circle-plus"
        @click="$router.push(add_url)"
        >添加</el-button
      >
    </div>
    <el-table
      :data="tableData"
      v-loading="loadList"
      element-loading-text="拼命加载中..."
      border
    >
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="body" label="内容"></el-table-column>
      <el-table-column prop="mobile" label="联系方式"></el-table-column>
      <el-table-column prop="createTime" label="发帖日期"></el-table-column>
      <el-table-column prop="topTime" label="置顶到期时间"></el-table-column>
      <el-table-column prop="views" label="浏览量"></el-table-column>
      <el-table-column prop="deleted" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.deleted == 0 ? "展示" : "隐藏" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="isTop" label="是否置顶">
        <template slot-scope="scope">
          <span>{{ scope.row.isTop == 0 ? "否" : "是" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="isHot" label="是否热帖">
        <template slot-scope="scope">
          <span>{{ scope.row.isHot == 0 ? "否" : "是" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="images" label="图片" width="220px">
        <template slot-scope="scope">
          <div class="images">
            <img
              v-for="i in scope.row.images.split(',')"
              :src="i"
              :key="i"
              style="width: 50px; height: auto"
            />
          </div>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="edit(scope.row.id)">修改</el-button>
          <el-button size="mini" type="danger" @click="del(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!loadList" class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50, 100, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { getList, del, getSchoolList } from "./api/index";
export default {
  data() {
    return {
      dialogVisible: false,
      currentPage: 1,
      total: 0,
      pager: 1,
      pageSize: 10,
      schoolList: [],
      schoolId: window.sessionStorage.getItem("schoolId")
        ? window.sessionStorage.getItem("schoolId") * 1
        : "",
      loadList: true,
      tableData: [],
      // getListFunc: Service.getList,
      // delItemFunc: Service.delItem,
      add_url: "/official-blog/add",
      edit_url: (id) => {
        return `/official-blog/${id}/edit`;
      },
    };
  },
  computed: {},
  created() {
    this.refresh_data();
    this.selectChange(this.currentPage);
  },
  methods: {
    findSchool(id) {
      console.log(id, "----");
      const obj = this.schoolList.find((i) => i.id === id);
      return obj ? obj : { name: "" };
    },
    // 查询
    async selectChange(currentPage) {
      if (!this.schoolId) return;
      window.sessionStorage.setItem("schoolId", this.schoolId);
      this.loadList = true;
      const res = await getList(this.schoolId, currentPage, this.pageSize);
      if (res.code === 1) {
        this.tableData = res.data.records;
      }
      this.loadList = false;
    },
    // 获取院校列表
    refresh_data() {
      getSchoolList()
        .then((data) => {
          console.log(data, "=====");
          if (data.code === 1) {
            this.schoolList = data.data;
          } else {
            this.$message.error(data.description);
          }
          this.loadList = false;
        })
        .catch((err) => {
          console.log(err);
          this.loadList = false;
        });
    },
    edit(id) {
      this.$router.push(this.edit_url(id));
    },
    handleSizeChange(val) {
      console.log(val, "111");
      this.pageSize = val;
      this.selectChange(1, this.params);
    },
    handleCurrentChange(val) {
      console.log(val, "00000");
      this.selectChange(val, this.params);
    },
    async del(item) {
      this.$confirm("确认删除该条数据？", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        this.loadList = true;
        const res = await del(item.id);
        if (res.code === 1) {
          this.selectChange(this.currentPage);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
  },
};
</script>
<style scoped>
.images {
  display: flex;
  flex-wrap: wrap;
}
.images img {
  margin: 20px;
}
</style>
